<template>
  <div class="canvas-box">
    <div class="header-box">
      <div class="title" v-if="propValue.option.boxTitle.show">
        {{ propValue.option.boxTitle.text }}
      </div>
      <div class="data">
        <div>共计 12313 {{ propValue.option.boxTitle.typeName }}</div>
        <div>16%</div>
      </div>
      <div class="date">
        <div
          :class="{ active: type === 'year' }"
          @click="changeDate('year')"
          class="date-year"
        >
          年
        </div>
        <div
          :class="{ active: type === 'month' }"
          @click="changeDate('month')"
          class="date-month"
        >
          月
        </div>
        <div
          :class="{ active: type === 'day' }"
          @click="changeDate('day')"
          class="date-day"
        >
          日
        </div>
      </div>
    </div>
    <div class="chart-box">
      <div style="padding: 5px 25px 0; color: #aaa">
        {{ propValue.option.boxTitle.typeName }}
      </div>
      <v-chart
        class="chart"
        autoresize
        :propValue="propValue"
        :element="element"
      />
    </div>
  </div>
</template>

<script>
import OnEvent from '../common/OnEvent';
import VChart from '../VChart/Component.vue';

export default {
  components: {
    VChart
  },
  extends: OnEvent,
  props: {
    propValue: {
      type: Object,
      require: true,
      default: () => { },
    },
    element: {
      type: Object,
      default: () => { },
    },
  },
  data() {
    return {
      type: "year",
			typeArray: ["year", "month", "day"]
    };
  },
  watch: {
    "propValue.option.wsUrl": function () {
      if (this.propValue.option.wsUrl) {
        this.init("submit")
      }
    },
		/**
		 * @Function 年月日切换时改变对应的数据显示
		 * 
		 *  */
		type() {
			console.log("api");
			const message = [
				{ "value": 10 + Math.round( Math.random(1000)), "name": "过热" },
				{ "value": 55 + Math.round( Math.random(100)), "name": "系统错误" },
				{ "value": 40 + Math.round( Math.random(100)), "name": "逆变器报警" },
				{ "value": 15 + Math.round( Math.random(100)), "name": "系统错误" },
				{ "value": 60 + Math.round( Math.random(100)), "name": "报错" },
			]
      this.$emit("changeData", this.element, message)
		}
  },
  methods: {
    changeDate(type) {
      this.type = type
    },
		/**
		 * @function 自动切换年月日
		 * @param typeArray 年月日数组
		 * @param type 当前选中的年/月/日
		 */
		setIntervalFn() {
			setInterval(() => {
				const index = this.typeArray.findIndex(item => item === this.type)
				if (index === 2) {
					this.type = this.typeArray[0]
				} else {
					this.type = this.typeArray[index + 1]
				}
			}, 1000);
		},
    getMessage(message) {
      this.$emit("changeData", this.element, JSON.parse(message))
    },
    init(type) {
      if (!this.propValue.option.wsUrl) return

      var websocket = null;
      var message = null;
      //判断当前浏览器是否支持WebSocket，是则创建WebSocket
      if ('WebSocket' in window) {
        console.log("浏览器支持Websocket");
        try {
          websocket = new WebSocket(this.propValue.option.wsUrl);
        } catch (error) {
          this.$message.error('请输入正确的WebSocket地址');
        }
      } else {
        alert('当前浏览器 Not support websocket')
      }

      //连接发生错误的回调方法
      websocket.onerror = () => {
        console.log("WebSocket连接发生错误");
        this.$message.error('WebSocket连接失败');
      };
      //连接成功建立的回调方法
      websocket.onopen = () => {
        if (type === 'submit') {
          this.$message({
            message: 'WebSocket连接成功',
            type: 'success'
          });
        }
        console.log("WebSocket连接成功");
      }
      //接收到消息的回调方法
      websocket.onmessage = (event) => {
        console.log(event.data);
        this.getMessage(event.data)
      }
      //连接关闭的回调方法
      websocket.onclose = function () {
        console.log("WebSocket连接关闭");
      }
    },
    closeWebSocket() {
      // websocket.close();
    }
  },
  mounted() {
    this.init()
		this.setIntervalFn()
  },
  beforeDestroy() {
    this.closeWebSocket()
  }
}
</script>

<style lang="scss" scoped>
.canvas-box {
  background: #0f0f0f;
  color: #fff;
	text-align: left;
  .header-box {
    // height: 80px;
  }
  .title {
    display: inline-block;
    padding: 0 15px;
    border-radius: 0.5vw 0.26vw 0.26vw 0;
    background: linear-gradient(275deg, #2f81ff 0%, #44e4e9 100%);
    color: #fff;
    margin: 0;
  }
  .data {
    display: flex;
    justify-content: space-between;
    padding: 8px 20px;
  }
  .date {
    display: flex;
    justify-content: end;
    padding: 0 20px;
    .date-year {
      padding: 2px 4px;
      border-radius: 5px;
    }
    .date-month {
      margin: 0 10px;
      padding: 2px 4px;
      border-radius: 5px;
    }
    .date-day {
      padding: 2px 4px;
      border-radius: 5px 5px 0 0;
    }
    .active {
      background: rgb(59, 63, 61);
			color: #2f81ff;
    }
  }
  .chart-box {
    background: rgba(255, 255, 255, 0.1);
    height: 75%;
    border-radius: 20px;
		padding-bottom: 15px;
  }
}
.chart {
  // height: 400px;
}
</style>
